<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view class="bg-white  radius" v-if="nurseInfo">
    <!--Logo-->
    <view class="bg-white radius">
      <view class="flex padding-sm justify-between">
        <view class="padding-xs text-xxl text-black">
          <view>{{ nurseInfo.name }}
            <text class="text-gray text-df"> / 主治</text>
          </view>
          <view class="text-gray text-df padding-top-sm">{{ nurseInfo.hospital }}</view>
        </view>
        <view class="">
          <view class="cu-avatar round xl"
                :style="'background-image:url('+prefix+nurseInfo.avatar+');'">
          </view>
        </view>
      </view>
    </view>

    <!-- 基本数据 -->
    <view class="cu-list grid col-4 no-border padding-xs">
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          500
        </view>
        <text>累计预约</text>
      </view>
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          V3
        </view>
        <text>今日预约</text>
      </view>
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          95
        </view>
        <text>人气</text>
      </view>
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          83
        </view>
        <text>好评率</text>
      </view>
    </view>

    <!--热门文章-->
    <view v-if="articleList.length" class="cu-good-act margin-sm bg-purple light">
      <view class="cu-good-t-box bg-gradual-green">
        <view class="cu-good-title">热门文章</view>
      </view>
      <view class="cu-good-point-con">
        <swiper class="swiper-box" :indicator-dots="false" :autoplay="true"
                :interval="5000" :duration="1000" circular="true" display-multiple-items="1">
          <swiper-item v-for="(item,index) in articleList" :key="index" @click="toQueryArticle(item)">
            <view class="cu-good-point-flex">
              <image class="cu-good-point-img radius" :src="prefix+item.coverImage"></image>
            </view>
            <view class="padding-tb text-bold text-xxl text-cut" style="width: 50vw">{{ item.title }}</view>
            <view>{{ item.createTime }}</view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <!--评咨询-->
    <view class="cu-bar margin-top-sm">
      <view class="action">
        <text class="text-xl">咨询方式</text>
      </view>
    </view>
    <view class="flex justify-center flex-sub">
      <view class="flex flex-direction flex-sub padding">
        <button class="cu-btn bg-blue lg " @click="handleChat">图文咨询</button>
      </view>
      <view class="flex flex-direction flex-sub padding">
        <button class="cu-btn bg-yellow lg" @click="handlePhone">电话咨询</button>
      </view>
    </view>

    <!--评价列表-->
    <view class="cu-bar margin-top-sm">
      <view class="action">
        <text class="text-xl">全部评价</text>
      </view>
    </view>
    <z-paging ref="pagingRef" @query="queryList" v-model="list" use-page-scroll>
      <CommentList :list="list" ></CommentList>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import api from "@/api";
import CommentList from "@/components/common/list/CommentList.vue";
import {imagePathPrefix} from '/settings'
import MrCustom from "@/components/common/MrCustom.vue";
import {useUserStore} from "@/store";

const userStore =useUserStore()
const prefix = imagePathPrefix
const pagingRef = ref()
const nurseInfo = ref()
const articleList = ref([])
const list = ref()

/**
 * 评论列表
 * @param pageNo
 * @param pageSize
 */
const queryList = (pageNo: any, pageSize: any) => {
  //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  //模拟请求服务器获取分页数据，请替换成自己的网络请求
  api.comment.queryByToUsername({
    targetType: 1,
    toUsername:nurseInfo.value.username,
    pageNo: pageNo,
    pageSize: pageSize
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data
      pagingRef.value.complete(tmp);
    }
  })
}

const toQueryArticle=(item:any)=>{
  uni.navigateTo({
    url: '/pages/common/article/article?articleInfo=' + encodeURIComponent(JSON.stringify(item))
  })
}
/**
 * 获取文章 5个
 * @param username
 */
const getArticleList = (username: any) => {
  api.article.list({
    pageNo: 1,
    pageSize: 5,
    andParams: JSON.stringify({
      username: username,
    }),
    orParams: '{}',
    orderParams: JSON.stringify({
      hot: 2
    }),
  }).then(res => {
    if (res && res.data.code === 0) {
      articleList.value = res.data.data.records
    }
  })

}

/**
 * 初始化
 */
onLoad((option) => {
  nurseInfo.value = JSON.parse(decodeURIComponent(option.nurseInfo))
  getArticleList(nurseInfo.value.username)
  getNurseInfo(nurseInfo.value.username)
})


const getNurseInfo=(username:any)=>{
  api.nurse.infoByUsername({
    username:username
  }).then(res=>{
    if(res&&res.data.code===0){
      nurseInfo.value=res.data.data
    }
  })
}
/**
 * 电话咨询
 * @param item
 */
const handlePhone = () => {
  uni.makePhoneCall({
    phoneNumber: nurseInfo.value.phone
  })
}

/**
 * 图文咨询
 * @param row
 */
const handleChat = () => {
    if (userStore.userInfo.status === 3||userStore.userInfo.status === 33||userStore.userInfo.status === 333) {
        uni.showToast({
            icon: 'error',
            title: '暂不支持医护之间咨询'
        })
        return
    }
  api.patient.info({}).then(response => {
    if (response && response.data.code === 0) {
      if (response.data.data === null) {
        //跳转认证
        uni.redirectTo({
          url: '/pages/patient/info/create',
          success: () => {
            uni.showToast({
              icon: 'error',
              title: '请先完善身份',
            })
          }
        })
      } else {
        api.chat.createFriends({
          fromUsername: response.data.data.username,
          fromName: response.data.data.name,
          fromAvatar: response.data.data.avatar,
          toUsername: nurseInfo.value.username,
          toName: nurseInfo.value.name,
          toAvatar: nurseInfo.value.avatar,
        }).then(res => {
          console.log(res)
          let params = {
            chatFriends: res.data.data
          }
          uni.navigateTo({
            url: '/pages/common/chat/chat?params=' + encodeURIComponent(JSON.stringify(params))
          })
        })
      }
    }
  })
}

</script>

<style scoped>



</style>